<template>
<p>可以利用筛选功能快速查找选项。</p>
<p>为<code>el-select</code>添加<code>filterable</code>属性即可启用搜索功能。 默认情况下，Select 会找出所有 <code>label</code> 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 <code>filter-method</code> 来实现。 <code>filter-method</code> 为一个 <code>Function</code>，它会在输入值发生变化时调用，参数为当前输入值。</p>
  <el-select
    v-model="value"
    filterable
    placeholder="Select"
    style="width: 240px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>